<template>
	<view class="menu-list-box flex-row">
		<view class="list-item" :key="dt.id" v-for="dt in comList" @click="changePage(dt.url)">
			<view class="center-jus"><image class="img" :src="dt.img"></image></view>
			<view class="menu-name">{{ dt.name }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		comList: {
			type: Array,
			required: true
		}
	},
	data() {
		return {};
	},
	methods: {
		changePage(url) {
			uni.navigateTo({url});
		}
	}
};
</script>

<style lang="scss" scoped>
.menu-list-box {
		padding-top: 30rpx;
		margin-left: 32rpx;
		.list-item {
			border-radius: 12rpx;
			height: 170rpx;
			flex: 2rem;
			background-color: $uni-bg-color;
			margin: 16rpx 32rpx 16rpx 0;
			
			image {
				width: 90rpx;
				height: 90rpx;
				margin: 20rpx 0 10rpx 0;
			}
		}
		.menu-name {
			font-size: 28rpx;
			width: 100%;
			text-align: center;
		}
	}
</style>
